<template>
  <el-dialog :title="'转账'" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true">
    <el-row>
      <el-col :span="24" style="position: relative;">
        <el-table :data="arr" style="width: 100%;min-height: 215px;max-height: 215px;overflow-y: auto;">
          <el-table-column prop="payPrice" header-align="center" align="center" label="科目/方式">
            <template slot-scope="scope">
              <!-- 科目 -->
              <!-- 账单类型（0预收账款1信用卡授权2消费3押金4房费5预收退款6结账收款7结账退款8退押金） -->
              <div v-if="scope.row.payType == 0">
                <span>预收账款/{{ scope.row.nowTypeName }}</span>
              </div>
              <div v-if="scope.row.payType == 1"><span>预授权</span></div>
              <div v-if="scope.row.payType == 2">
                <span>{{ scope.row.consumeName }}</span>
              </div>
              <div v-if="scope.row.payType == 3"><span>押金</span></div>
              <div v-if="scope.row.payType == 4"><span>房费</span></div>
              <div v-if="scope.row.payType == 5">
                <span>预收退款/{{ scope.row.nowTypeName }}</span>
              </div>
              <div v-if="scope.row.payType == 6">
                <span>结账收款/{{ scope.row.nowTypeName }}</span>
              </div>
              <div v-if="scope.row.payType == 7">
                <span>结账退款/{{ scope.row.nowTypeName }}</span>
              </div>
              <div v-if="scope.row.payType == 8"><span>退押金</span></div>
            </template>
          </el-table-column>
          <el-table-column prop="payPrice" header-align="center" align="center" label="消费">
            <template slot-scope="scope">
              <span v-if="scope.row.payType == 2 || scope.row.payType == 4">￥{{scope.row.payPrice}}</span>
              <span v-else>--</span>
            </template>
          </el-table-column>

          <el-table-column prop="payPrice" header-align="center" align="center" label="收款">
            <template slot-scope="scope">
              <span v-if="scope.row.payType == 0 || scope.row.payType == 3 ">￥{{scope.row.payPrice}}</span>
              <span v-else>--</span>
              <span v-if="scope.row.payType == 6 || scope.row.payType == 7|| scope.row.payType == 5">￥{{scope.row.payPrice}}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24" style="margin-right: 10px; position: relative;">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px" style="margin-top: 10px;">
          <el-form-item size="small" label="已选" v-if="selectType == 1">
            <div style="margin-bottom: 0;">
              <div>
                <div class="in_block">
                  <label class="fourChar">单号:</label>
                  <label>{{selectItem.sysNo}}</label>
                </div>
              </div>
              <div>
                <div class="in_block">
                  <label>房间:</label>
                  <label>{{selectItem.hotelFloorRoomEntity.roomSign}}{{selectItem.hotelFloorRoomEntity.roomNum}}</label>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item size="small" label="入账账号">
            <el-button icon="el-icon-position" @click="selectDengjiDan">选择</el-button>
          </el-form-item>
          <el-form-item label="备注" prop="remarks"><el-input type="textarea" :rows="2" v-model="dataForm.remarks" placeholder="备注"></el-input></el-form-item>
        </el-form>

        <div class="common_prompt position clear_float" style="bottom: 0px;">
          <div class="pull">
            <span>消费:￥{{xiaofei}}</span>
            <span>总收款:￥{{fukuanm}}</span>
          </div>
          <div class="push"><span>余额:￥{{xiaofei - fukuanm}}</span></div>
        </div>
      </el-col>

    </el-row>

    <span class="dialog-footer" slot="footer">
      <el-button @click="visible = false">{{ $t('Common.Cancel') }}</el-button>
      <el-button type="primary" @click="dataFormSubmit(6)">{{ $t('Common.Confirm') }}</el-button>
    </span>


    <guestlist v-if="guestlistVisible" ref="guestlist" @selctClosing="selctClosingReq"></guestlist>

  </el-dialog>
</template>

<script>
import guestlist from './guestlist';
export default {
  data() {
    return {
      selectType:2,
      selectItem:{},
      xiaofei:0,
      fukuanm:0,
      dataListLoading: false,
      guestlistVisible: false,
      fukuan: 2,
      arr: [],
      options: {
        peopleOptions: []
      },
      dataForm: {
        id: 0,
        sellerId: '',
        consumeId: '',
        payType: '',
        creatTime: '',
        payPrice: 0,
        banks: '',
        banksNumber: '',
        referenceNumber: '',
        termValidity: '',
        peopleId: '',
        remarks: '',
        nowType: '',
        type: ''
      },

      dataRule: {
        sellerId: [{ required: true, message: '商家不能为空', trigger: 'blur' }]
      },
      activeName: 'first',
      visible: false,
      info: {}
    };
  },
  components: {guestlist},
  methods: {
    selectDengjiDan() {
      this.guestlistVisible = true;
      this.$nextTick(() => {
        this.$refs.guestlist.init();
      });
    },
    selctClosingReq(item) {
      this.selectType = 1
      this.selectItem = item
      console.log(item)
    },
    shopChange(arr) {
      this.xiaofei = 0;
      this.fukuanm = 0;
      arr.forEach(item => {
        // 账单类型（0预收账款1信用卡授权2消费3押金4房费5预收退款6结账收款7结账退款8退押金）
        if (item.payType == 2) {
          this.xiaofei += parseFloat(item.payPrice);
        } if (item.payType == 4) {
          this.xiaofei += parseFloat(item.payPrice);
        } if (item.payType == 0) {
          this.fukuanm += parseFloat(item.payPrice);
        }
      });

      //计算价格
      this.dataForm.payPrice = this.xiaofei - this.fukuanm;
    },
    init(arr, peopleId) {
      this.arr = arr;
      this.shopChange(arr);
      this.visible = true;
      this.$forceUpdate();
      this.$nextTick(() => {
        this.dataForm.peopleId = peopleId;
      });
    },
    // 表单提交
    dataFormSubmit(type) {
      var idArr = [];
      this.arr.forEach(item => {
        idArr.push(item.id);
      });
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/hotel/thotelfloorroomcheckinaccounting/transferaccounts`),
            method: 'post',
            data: this.$http.adornData({
              peopleId: this.selectItem.id,
              remarks: this.dataForm.remarks,
              xiaofeiMoney: this.xiaofei,
              fukuanMoney: this.fukuanm,
              submitIds: idArr.join(',')
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.visible = false;
              this.$nextTick(() => {
                this.$emit('refreClosing');
              });
              this.$message({
                message: this.$t('Common.OperationSuccessful'),
                type: 'success',
                duration: 1500
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    }
  }
};
</script>

<style></style>
